<template>
  <div class="bgy-screen-table">
    <div class="relative" v-show="SHOW_LOADING">
      <iframe src="" frameBorder="0" marginHeight="0" marginWidth="0" id="iframeBGI" :style="{width:`${innerWidth}px`}"></iframe>
      <div id="iframeBGC" :style="{height: `${contentHeight-50}px`,width:`${innerWidth-80}px`}">
        <div style="position: absolute;top: 50%;left: 55%;transform: translate(-50%,-50%);text-align: center">
          <img src="/static/images/bgy-loading.gif" alt="" >
          <div style="text-align: center;font-size: 18px;color: #00e5ff;">请勿关闭浏览器...</div>
        </div>
      </div>
    </div>
    <div
      class="bgy-screen-left"
      :style="{height: `${contentHeight}px`}" ref="screenLeft">
      <zz-frame width="100%" height="100%">
        <zz-mulvideo
          :deviceVideoList="deviceVideoList"
          :projectNameArray="projectNameArray"
          @initSuccess="initSuccess"
          ref="mulvideo"></zz-mulvideo>
      </zz-frame>
    </div>
    <div class="bgy-screen-right">
      <zz-frame width="340px" height="95px" class="mb10" :padding="[17, 17, 17, 17]">
        <div class="left">
          <p class="project-online">在线项目</p>
          <p class="project-online-length">{{videoNode.company}}</p>
        </div>
        <div class="left project-line"></div>
        <div class="left">
          <div>
            <span class="camera-online">在线摄像头:</span>
            <span class="camera-online-length">{{videoNode.dev}}</span>
            <span class="camera-arrow camera-up" v-show="videoNode.devStatusUp">
              <i class="iconfont icon-jianyoushang" ref="devStatusUp"></i>{{videoNode.afterDev}}
            </span>
            <span class="camera-arrow camera-down" v-show="videoNode.devStatusDown">
              <i class="iconfont icon-jianyouxia" ref="down"></i>{{-videoNode.afterDev}}
            </span>
          </div>
          <div class="mt10">
            <span class="camera-online">摄像头在线率:</span>
            <span class="camera-online-length">{{Math.round(videoNode.devRate)}}%</span>
            <span class="camera-arrow camera-up" style="margin-top: 13px" v-show="videoNode.rateStatusUp">
              <i class="iconfont icon-jianyoushang" ref="up"></i>{{Math.round(videoNode.afterRate)}}%
            </span>
            <span class="camera-arrow camera-down" style="margin-top: 13px"  v-show="videoNode.rateStatusDown">
              <i class="iconfont icon-jianyouxia" ref="rateStatusDown"></i>{{-Math.round(videoNode.afterRate)}}%
            </span>
          </div>
        </div>
        <div class="left" style="width: 50px">

        </div>
      </zz-frame>
      <zz-frame width="340px" overflow="hidden" :height="`${projectHeight}px`" :padding="[17, 17, 17, 0]">
        <div class="clear">
          <p class="tableP-screen left" style="margin-left: 17px; height: 21px; line-height: 21px"><span>项目列表</span></p>
          <div class="right shaixuan-color">
            <zz-retrieve
              ref="retrieveArea"
              fontSize="12px"
              tip="全部区域"
              icon="shaixuan"
              title="自定义轮播项目"
              @show="showRetrieveArea"
              @confirmAll="confirmAll"
              @confirm="customize"
              :departmentIdsProps="departmentIdsProps"
              :projectIdsProps="projectIdsProps"
              :search = false
              :showAdmin = false
              :showCheckbox = true
              :filter = true
              :bottom = true
              :height="368"
              :left="-186"
              :top="25"
              :hover = true></zz-retrieve>

            <zz-retrieve
              ref="retrieveSearch"
              @show="showRetrieveSearch"
              style="margin-left: 15px"
              fontSize="12px"
              tip="搜索"
              icon="sousuo"
              :left="-280"
              :top="25"
              :hover = true></zz-retrieve>
          </div>
        </div>
        <div
          class="relative"
          :style="{height: `${(projectHeight - 54)}px`}"
          @mouseenter="initInterval(true)"
          @mouseleave="initInterval(false)">
          <div class="project-list">
            <div
              ref="projectList"
              v-for="item in projectList"
              @mouseenter="item.hover = true"
              @mouseleave="item.hover = false"
              @click="push(item)"
              class="relative"
              :style="{height: `${(projectHeight - 95) / (video.windsNum === 4 ? '9' : video.windsNum)}px`, color:`${item.warnType ? 'red' : '#fff'}`}">
              <div class="project-hover" v-show="item.hover"
                   :style="{height: `${(projectHeight - 225) / (video.windsNum === 4 ? '9' : video.windsNum)}px`, lineHeight: `${(projectHeight - 225) / (video.windsNum === 4 ? '9' : video.windsNum)}px`}"
              >点击查看项目监控</div>
              <div class="left image" v-if="video.windsNum === 9 || video.windsNum === 4">
                <img :style="{border:`${item.warnType ? '1px solid red' : 'none'}`}" src="/static/images/default.jpg"/>
              </div>
              <div class="left project-name-table" :class="{projectMaxTable: video.windsNum === 16}" :style="{height: `${(projectHeight - 225) / (video.windsNum === 4 ? '9' : video.windsNum)}px`}">
                <div class="project-name-cell">
                  <span>{{item.projectTitle}}</span>
                  <i v-if="item.warnType && item.warnType.includes('明火')"  class="iconfont icon-right icon-huo" style="color: red" v-tooltip="'明火'"
                     :class="item.warnType ? 'shrink-icon' : ''"></i>
                  <i v-if="item.warnType && item.warnType.includes('烟雾')" class="iconfont icon-right icon-yangantanceqi" style="color: red" v-tooltip="'烟雾'"
                     :class="item.warnType ? 'shrink-icon' : ''"></i>
                </div>
              </div>
            </div>
            <div class="clear project-next">
              <div class="left" @click="prev" :class="{'project-not-allowed': pageNum === 1}"><i class="iconfont icon-t-arrow"></i></div>
              <div class="right" @click="next" :class="{'project-not-allowed': pageNum === pages}"><i class="iconfont icon-r-arrow"></i></div>
            </div>
          </div>
        </div>
      </zz-frame>
    </div>
  </div>
</template>

<script>
  import mixin from './mixin'
  import { mapGetters } from 'vuex'
  export default {
    name: 'screen-area',
    mixins: [mixin],
    data () {
      return {
        interval: null,
        leaveIndex: 0,
        pageNum: 1,
        pages: 1,
        isFirstQuery: true,
        isCustomize: false,
        deviceVideoList: [],
        customizeProjectIds: [],
        customizeDepartmentIds: [],
        departmentIdsProps: [],
        projectIdsProps: [],
        projectList: [],
        projectNameArray: [],
        SHOW_LOADING: true,
        projectNode: null,
        warnId: null,
        warnList: [],
        warnListLength: 0,
        warnIndex: 0,
        warnListSet: new Set()
      }
    },
    computed: {
      ...mapGetters({
        currentUser: 'currentUser',
        videoNode: 'getVideoNode',
        video: 'getVideo',
        incomingProjectNode: 'incomingProjectNode'
      })
    },
    watch: {
      video (newVal) {
        if (newVal.query) {
          this.reset(true)
        }
      },
      '$route' (to, from) {
        if (to.name === 'videoArea') {
          this.isCustomize = false
          this.reset(false)
        }
      },
      incomingProjectNode (item) {
        this.warnListSet.add(item)
        this.warnList = [...this.warnListSet]
        for (let i in this.warnList) {
          this.setVideoListNode(this.warnList[i])
        }
        setTimeout(() => {
          this.warnListSet.delete(item)
          this.warnList = [...this.warnListSet]
          for (let i in this.warnList) {
            this.setVideoListNode(this.warnList[i])
          }
        }, 1000 * 60 * 3)
      }
    },
    mounted () {
      this.projectNode = new this.$Node({
        group: `COMPANY_GROUP_${this.currentUser.coId}`,
        mName: this.currentUser.mName
      })
    },
    beforeRouteLeave (to, from, next) {
      window.clearInterval(this.timer)
      if (this.projectNode.options.nodejsServer) {
        this.projectNode.logout()
      }
      next()
    },
    activated () {
      this.query()
    },
    methods: {
      setVideoListNode (project) {
        this.projectList = this.projectList.map((obj) => {
          if (obj.projectId === project.projectId) {
            obj.warnType += project.typeName
          }
          return obj
        })
      },
      initSuccess () {
        this.query()
        this.SHOW_LOADING = false
      },
      initInterval (status = false) {
        if (this.pages > 1) {
          if (status) {
            window.clearInterval(this.interval)
            this.interval = null
          } else {
            if (!this.interval) {
              this.interval = setInterval(() => {
                if (this.pages === this.pageNum) {
                  this.pageNum = 0
                }
                this.pageNum++
                if (this.isCustomize) {
                  this.getVideoPagenationByOrganizationIds()
                } else {
                  this.query()
                }
              }, 1000 * this.video.time)
            }
          }
        }
      },
      showRetrieveArea () {
        this.$refs.retrieveSearch.visible = false
      },
      customize (obj) {
        this.isCustomize = true
        window.clearInterval(this.interval)
        this.interval = null
        this.customizeProjectIds = obj.projectIds
        this.projectIdsProps = obj.projectIds
        this.customizeDepartmentIds = obj.departmentIds
        this.departmentIdsProps = obj.departmentIds
        this.getVideoPagenationByOrganizationIds()
      },
      prev () {
        if (this.pageNum === 1) {
        } else {
          window.clearInterval(this.interval)
          this.interval = null
          this.pageNum--
          this.query()
        }
      },
      next () {
        if (this.pageNum === this.pages) {
        } else {
          window.clearInterval(this.interval)
          this.interval = null
          this.pageNum++
          this.query()
        }
      },
      getVideoPagenationByOrganizationIds () {
        const data = {
          'coId': this.currentUser.coId,
          'userMid': this.currentUser.mid,
          'pageNum': 1,
          'projectIds': this.customizeProjectIds.join(','),
          'departmentIds': this.customizeDepartmentIds.join(',')
        }
        this.$axios({
          method: 'post',
          closeLoading: true,
          url: `${this.$site.videoServer}/api/hikvision8700/getVideoPagenationByOrganizationIds`,
          data: this.$qs.stringify(data, {indices: false})
        }).then(res => {
          const {deviceVideoList, projectList} = res.data.data
          this.deviceVideoList = deviceVideoList.dataList
          this.pages = deviceVideoList.pages
          this.projectList = projectList.map((item) => {
            this.$set(item, 'hover', false)
            if (this.warnList.length > 0) {
              this.warnList.forEach(warn => {
                if (item.projectId === warn.projectId) {
                  this.$set(item, 'warnType', warn.typeName)
                }
              })
            }
            return item
          })
          this.projectNameArray = projectList
          if (!this.interval) {
            this.initInterval()
          }
        })
      },
      showRetrieveSearch () {
        this.$refs.retrieveArea.visible = false
      },
      confirmAll () {
        this.isCustomize = false
        this.reset()
      },
      reset (status) {
        this.pageNum = 1
        window.clearInterval(this.interval)
        this.interval = null
        this.query(status)
      },
      query (isEditTime = false) {
        const data = {
          'companyId': this.currentUser.coId,
          'userMid': this.currentUser.mid,
          'pageNum': this.pageNum,
          'departmentId': this.$route.query.departmentId
        }
        if (isEditTime) {
          data['windsNum'] = this.video.windsNum
          data['broadCastSecond'] = this.video.time
        }
        let url = `${this.$site.videoServer}/api/hikvision8700/getEnterpriseVideoPageNation`
        if (this.$local.get('login') === 'loginCompany') {
          url = `${this.$site.videoServer}/api/hikvision8700/getEnterpriseVideoPageNationOnlyWise`
        }
        this.$axios({
          method: 'post',
          closeLoading: true,
          closeSaveRequest: true,
          url: url,
          data: this.$qs.stringify(data)
        }).then(res => {
          const {deviceVideoList, projectList, userRecord} = res.data.data
          this.projectNameArray = projectList
          this.$store.commit('editVideo', {windsNum: userRecord.windsNum, time: userRecord.broadCastSecond, query: false})
          this.pages = deviceVideoList.pages
          this.projectList = projectList.map((item) => {
            this.$set(item, 'hover', false)
            if (this.warnList.length > 0) {
              this.warnList.forEach(warn => {
                if (item.projectId === warn.projectId) {
                  this.$set(item, 'warnType', warn.typeName)
                }
              })
            }
            return item
          })
          if (this.isFirstQuery) {
            this.isFirstQuery = false
            if (this.$Browser().trident) {
              this.$nextTick(() => {
                setTimeout(() => {
                  this.$refs.mulvideo.InitMpvx()
                }, 2000)
              })
            }
          } else {
            if (!this.interval) {
              this.initInterval()
            }
            this.deviceVideoList = deviceVideoList.dataList
          }
        })
      },
      push (item) {
        if (this.$local.get('login') === 'loginCompany') {
          this.$refs.retrieveArea.nodeProjectClick(item, 1)
        } else {
          this.$router.push({name: 'videoProject', query: {pjId: item.projectId, name: item.projectTitle}})
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  #iframeBGI {
    position:fixed;
    visibility:inherit;
    top:190px;
    left:30px;
    height:2000px;
    z-index: 2;
    background: rgba(0,0,0,.1);
  }

  #iframeBGC {
    position: fixed;top: 58%;left:40%;height:600px;z-index: 3;transform: translate(-50%,-50%);background-color: #091f2d;
  }

  .project-list{
    cursor: pointer;
    margin-left: 20px;
    >div{
      padding-top: 16px;
      box-sizing: border-box;
      color: #a9c5ec;
    }
    .project-next{
      width: 150px;
      height: 25px;
      position: absolute;
      bottom: 20px;
      left: 105px;
      >div{
        width: 65px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        background: rgba(71, 159, 205, 0.15);
        cursor: pointer;
        box-shadow: 0 0 5px 2px rgba(71, 159, 205, 0.35) inset;
        i{
          font-size: 13px;
          font-weight: bolder;
          color: #00e5ff;
        }
      }
      .project-not-allowed{
        cursor: not-allowed;
        opacity: 0.7;
      }
    }
    .project-hover{
      margin-top: 16px;
      width: 305px;
      box-shadow: 0 0 10px 3px rgba(71, 159, 205, 0.35) inset;
      background: rgba(0, 0, 0, 0.5);
      position: absolute;
      box-sizing: border-box;
      top: 0;
      left: 0;
      z-index: 2;
      color: $color-screen;
      text-align: center;
    }
    .image{
      width: 129px;
      height: 100%;
      overflow: hidden;
      margin-right: 10px;
      position: relative;
      >img{
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
    }
    .project-name-table{
      display: table;
      width: 157px;
      .project-name-cell{
        display:table-cell;
        vertical-align:middle;
        text-align: left;
        width:100%;
        span {
          display: inline-block;
          width: 85%;
        }
        .icon-group {
          position: absolute;
          right: 0;
        }
      }
    }
    .projectMaxTable{
      width: 300px;
    }
  }
  .shaixuan-color{
    color: #a9c5ec;
  }
</style>
